﻿@using System.Text
@model Easy.CMS.Product.ViewModel.ProductListWidgetViewModel
@{
    Style.Reqiured("PhotoWall").AtHead();
    Script.Reqiured("PhotoWall").AtFoot();
    string formatTemplate = "{{id:{0},img:'{1}',width:{2},height:{3},th:{{src:'{4}',width:{5},height:{6},zoom_src:'{7}',zoom_factor:1.5}}}},";
    StringBuilder builid = new StringBuilder();
    Random r=new Random();
    foreach (var item in Model.Products)
    {
        builid.AppendFormat(formatTemplate, item.ID, item.ImageUrl, r.Next(100, 500), r.Next(100, 500), item.ImageThumbUrl, r.Next(20, 100), r.Next(20, 100), item.ImageThumbUrl);
    }
}
<div id="gallery">
    <div class="body">
    </div>
</div>

@using (Script.AtFoot())
{
    <script>
        $(function () {
            var PhotosArray = new Array(@Html.Raw(builid.ToString().Trim(',')));
            PhotoWall.init({
                el: '#gallery',
                zoom: true,
                zoomAction: 'mouseenter',
                zoomTimeout: 500,
                zoomDuration: 100,
                showBox: true,
                showBoxSocial: false,
                padding: 5,
                lineMaxHeight: 200
            });
            PhotoWall.load(PhotosArray);
        });
    </script>
}